<template>
  <div id="my_menu" style="height:3vw;width:100%">
    <el-menu mode="horizontal" default-active="/Home" :router="true" style="height:100%;width:100%" menu-trigger="click"
      unique-opened close-on-click-outside><!--default-active表示默认激活的index所在的item-->
      <el-menu-item index="/Home">地信Q</el-menu-item>
      <el-sub-menu index="模板应用">
        <template #title>模板应用</template>
        <el-menu-item index="/变量插值">变量插值</el-menu-item>
        <el-menu-item index="/双向绑定">双向绑定</el-menu-item>
        <el-menu-item index="/条件渲染">条件渲染</el-menu-item>
                <el-menu-item index="/循环渲染">循环渲染</el-menu-item>
                <el-menu-item index="/样式绑定">动态样式绑定</el-menu-item>
                <el-menu-item index="/事件绑定">事件绑定</el-menu-item>
                <el-menu-item index="/响应式编程">响应式编程</el-menu-item>
      </el-sub-menu>
    </el-menu><!--菜单组件-->
    <el-switch v-model="主题" style="position:absolute;top:50%;right:120px;transform:translate(0,-50%);
      --el-switch-on-color: rgb(150,150,150); --el-switch-off-color:rgb(150,150,150)" @change="切换主题"
      :loading="isLoading">
      <template #active-action>
        <el-icon>
          <Sunrise />
        </el-icon>
      </template>
      <template #inactive-action>
        <el-icon>
          <Moon />
        </el-icon>
      </template>
    </el-switch><!--开关组件,用于切换主题-->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const props = defineProps({
  routerKey_: Number
})
const emit = defineEmits(["routerKeyChange"])//将父组件中v-model对应的事件识别为"update:modelValue"
const isLoading = ref(false)
const 主题 = ref(false)
const arcgis_切换主题 = () => {//切换arcgis api的主题样式同时刷新一次页面
  for (let item of document.getElementsByTagName('link')) {
    if (item?.href.indexOf("light") !== -1) {
      item.href = item.href.replace("light", "dark")
    } else if (item?.href.indexOf("dark") !== -1) {
      item.href = item.href.replace("dark", "light")
    }
  }
  emit("routerKeyChange", props.routerKey_ + 1)
}
const 切换主题 = () => {//刷新element-plus组件的主题样式同时刷新一次页面
  if (主题.value) {
    document.getElementsByTagName('html')[0].className = ""
    store.commit('changeTheme', { theme: "light" })
    arcgis_切换主题()
  } else {
    document.getElementsByTagName('html')[0].className = "dark"
    store.commit('changeTheme', { theme: "dark" })
    arcgis_切换主题()
  }
}
</script>

<style scoped>
#menu {
  width: 100%;
  height: 100%;
}
</style>
